<template>
	<view class="assistant-list-item flex-row-align-center" @click="goDetail(2)">
		<!-- 头像 -->
		<image src="../../static/avatar.jpg"></image>
		<!-- 信息区 -->
		<view class="right-info-box">
			<view class="row1 flex-row-between-center">
				<view class="row1-name-box flex-row-align-center">
					<view class="name">轩宇清</view>
					<view :class="['status', index === 4 ? 'can-not' : 'can']">{{ index === 4 ? '不可预约' : '可预约' }}</view>
				</view>
				<view class="time">最早可约 今天14:00</view>
			</view>
			<view class="row2 flex-row-between-center">
				<view class="left-digit flex-row-between-center">
					<view class="rate">
						<uni-icons
							type="star-filled"
							color="
              "
						></uni-icons>
						5
					</view>
					<view class="service-counts">近30天已服务45单</view>
				</view>
				<view class="right-distance flex-row-align-center">
					<uni-icons type="location-filled" color="#1aff17"></uni-icons>
					<view class="digit">3.47km</view>
				</view>
			</view>
			<view class="row3 flex-row-between-center">
				<view class="left-level flex-row-align-center">
					<view class="level-name">资深</view>
					<view class="comment-counts flex-row-align-center">
						<uni-icons type="chatbubble"></uni-icons>
						<view class="">23</view>
					</view>
					<view class="collect-counts flex-row-align-center" @click.stop="collect">
						<uni-icons type="heart-filled" :color="isCollect?'#ff0000':''"></uni-icons>
						<view class="">12</view>
					</view>
				</view>
				<button style="margin-right: 0" size="mini" type="primary" @click.stop="goPay">立即预约</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { showMsg } from '../../utils/interact';

const props = defineProps({
	assis: {
		type: Object,
		required: true
	},
	// 测试属性，待删除
	index: {
		type: Number,
		default: 0
	},
	popup: {
		type: Object,
		default: () => {
			return {};
		}
	},
	cate: {
		type: String,
		default: ''
	}
});
let cate = props.cate;
const isCollect=ref(false);
// 点击跳转详情页
function goDetail(id) {
	uni.navigateTo({
		url: `/subpkg/assistant-detail/assistant-detail?id=${id}`
	});
}
// 收藏
function collect() {
  // 切换样式
  isCollect.value=!isCollect.value
  
  if(isCollect.value){
    showMsg('收藏成功')
  }else{
    showMsg('取消收藏')
  }
	// 接收助教id
	console.log('收藏数+1');
}

// 立即预约
function goPay() {
	// 隐藏tabbar
	uni.hideTabBar();
	//先判断是否登录
	if (true) {
		// 已登录，选择时长
		//判断是否选择了时长
		if (cate !== '') {
			//已选择时长，跳转支付页面
			uni.navigateTo({
				url: '/subpkg/pay-order/pay-order'
			}); // 传助教名字，头像，陪打时长，价格
		} else {
			props.popup.open();
		}
	} else {
		showMsg('未登录，请先登录');
		//未登录，跳转登录
		setTimeout(() => {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		}, 1600);
	}
}
</script>

<style lang="scss" scoped>
.assistant-list-item {
	padding: 20rpx;
	margin: 14px;
	background: $uni-bg-color;
	border-radius: $uni-border-radius-lg;

	image {
		width: 80px;
		height: 80px;
		border-radius: $uni-border-radius-circle;
		margin-right: 10px;
	}

	// 信息区
	.right-info-box {
		flex-grow: 1;

		.row1 {
			.row1-name-box {
				.name {
					font-size: 32rpx;
				}
				.status {
					padding: 4rpx 10rpx;
					margin-left: 14rpx;
					// color: $uni-text-color-inverse;
					font-size: $uni-font-size-sm;
					border-radius: $uni-border-radius-base;
				}
				.can {
					background: #55ff7f;
				}
				.can-not {
					background: grey;
				}
			}
			.time {
				font-size: $uni-font-size-sm;
			}
		}

		.row2 {
			margin: 20rpx 0;

			.left-digit {
				.service-counts {
					color: $uni-text-color-grey;
					margin-left: 12rpx;
				}
				.rate {
					color: #ff0000;
				}
			}

			.right-distance {
				.digit {
					font-weight: bold;
				}
			}
		}

		.row3 {
			.left-level {
				.level-name {
					margin-right: 20rpx;
				}

				.comment-counts {
					margin-right: 13rpx;
				}
			}
		}
	}
}
</style>
